<template>
  <view class="products-list">
      <view class="content">
        <view class="items">
          <block v-for="(item, index) in products" :key="index">
            <view class="item" @click="goToProduct(item.id)">
              <image class="cover" :src="item.cover_url"></image>
              <view class="desc">
                <view class="title">
                  <product-title-com :product="item" :length="30"></product-title-com>
                </view>
                <view class="price">
									<view class="price-box">
										<view class="price_vip">
											<view class="unit">￥</view>
											<view class="money">{{ item.price_lowest }}</view>
											<image src="/static/images/vip-price-icon.png" mode=""></image>
										</view>
										<view class="price_market">￥{{ item.price_market }} <text>市场价</text> </view>
									</view>
									<view class="item-bottom">
										<view class="return-money" v-if="user&&user.grade=='normal'&&item.is_return_section">开通VIP后购买立返9.9元会员费</view>
										<view class="return-money return-money1" v-if="user&&user.grade=='vip'&&item.is_return_section&&!user.has_returned_product_balance_this_month">立返9.9元会员费</view>
										<view class="return-money" v-if="!user&&item.is_return_section">开通VIP后购买立返9.9元会员费</view>
										<view class="red-packet">
											<view class="red-packet-text">红包</view>
											<view class="red-packet-num">
												<image src="/static/images/redbg.png" mode=""></image>
												<text>￥{{ item.brokerage | brokerageNum }}</text>
											</view>
										</view>
									</view>
                </view>
              </view>
            </view>
          </block>
        </view>
        <view class="no-more" v-if="pageHasNoMore">
          --- 没有更多数据了 ---
        </view>
      </view>
  </view>
</template>

<script>
import Pagination from "mixins/Pagination"
import store from "store"
import { mapGetters } from 'vuex'
export default {
	store,
  name: "HotProductsListCom",
	mixins: [Pagination],
  props: {
    products: {
      type: Array,
      default: []
    },
		isCashBack:{
			default:false
		}
  },
	computed: {
		...mapGetters(['user'])
	},
  methods: {
    goToProduct(id) {
			if(this.isCashBack){
				 uni.navigateTo({url: `/packs/pages/product/show?product_id=${id}&isCashBack=${this.isCashBack}`})
			}else{
				 uni.navigateTo({url: `/packs/pages/product/show?product_id=${id}`})
			}
     
    }
  }
}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
  .products-list {
    width: 100%;
    .items {
      .item {
        display: flex;
        background: white;
        padding: 20rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        .cover {
          width: 188rpx;
          height: 188rpx;
          margin-right: 20rpx;
          border-radius: 12rpx;
        }
        .desc {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 438rpx;
          .title {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            vertical-align: middle;
          }
          .price {
						.price-box{
							display: flex;
							align-items: center;
						}
            .price_market {
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
							margin-left: 15rpx;
							// text-decoration: line-through;
							>text{
								margin-left: 10rpx;
							}
            }
            .price_vip {
              display: flex;
              align-items: center;
							>image{
								display: block;
								width: 68rpx;
								height: 28rpx;
							}
              .unit {
                font-size: 24rpx;
                font-weight: 400;
                color: #FF4924;
				
              }
              .money {
                font-size: 36rpx;
                font-weight: 600;
                color: #FF4924;
              }
              .label {
                width: 68rpx;
                height: 28rpx;
              }
            }
						
						.item-bottom{
							display: flex;
							flex-direction: column;
							margin-top:10rpx;
							.return-money{
								// width: auto;
								width: 270rpx;
								height: 30rpx;
								padding: 0 6rpx;
								border-radius:14rpx;
								background: rgb(222,75,72);
								display: flex;
								align-items: center;
								justify-content: center;
								color: #FFFFFF;
								font-size: 18rpx;
								margin:0 0 12rpx 15rpx;
							}
							.return-money1{
								width: 150rpx;
							}
						}
          }
        }
      }
    }
    .no-more {
      width: 100%;
      font-size: 24rpx;
      text-align: center;
      color: #cccccc;
    }
  }
  .red-packet{
  	width: fit-content;
  	height:34rpx;
  	border: 2rpx solid #FC653B;
  	border-radius:12rpx;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	margin: 0 0 0rpx 16rpx;
  }
  .red-packet-text{
  	width: 54rpx;
  	font-size: 20rpx;
  	font-family: PingFangSC-Regular, PingFang SC;
  	font-weight: 400;
  	color: #FF4924;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding-left: 5rpx;
  }
  .red-packet-num{
  	min-width: 84rpx;
  	height: 100%;
  	position: relative;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	image{
  		display: block;
  		width: 100%;
  		height:100%;
  		position: absolute;
  		right: 0;
  		top:0;
  		z-index: 0;
  	}
  	text{
  		position: relative;
  		z-index: 1;
  		font-size: 24rpx;
  		font-family: PingFangSC-Semibold, PingFang SC;
  		font-weight: 600;
  		color: #FFFFFF;
  		padding: 0 20rpx;
  	}
  }
</style>
